<template>
	<view class="loadingPage" v-show="showLoading">
		<!-- :style="{ 'background-image': `url(${loadingBg})` }" -->
		<view class="content">
			<!-- <canvas canvas-id="myCanvas" style="width: 100vw; height: 100vh;"> </canvas> -->

			<view class="bg-box">
				<image class="bg-box-img" :src="loadingCoverImg" mode="aspectFill"></image>
			</view>
			<view class="loadingIconBox" v-if="false">
				<image :src="loadingIcon" class="loadingIcon"></image>
				<!-- <view class="tip-text">{{loadingText}}</view> -->
			</view>


			<view class="m-progress">

				<view class="center-progress">
					<view class="center-progress-content" :style="{width:(nowNum/totalNum)*100+'%'}">

					</view>

					<!-- <view class="percent-text">{{(nowNum/totalNum).toFixed(2)*100+'%'}}</view> -->

				</view>
				<view class="tip-text">心动加载中...
					<view class="tip-percent-text">{{parseInt((nowNum/totalNum)*100)+'%'}}</view>
				</view>




			</view>

		</view>

	</view>
</template>

<script>
	import {
		setInterval
	} from 'timers'
	export default {

		props: {
			loadingCoverImg: {
				type: String,
				// default: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/84e3aa12850a42b6a27c6626a88680c8.png",
				default: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/cbc566332e024fe7ad0b700efb05ebc7.jpg",
			}
		},

		data() {
			return {
				showLoading: true,
				loadingIcon: "",
				loadingText: "",
				totalNum: 100,
				nowNum: 30,
				intervalId: null

			}
		},
		mounted() {
			// console.log("你好")
			this.handleDrawBg()
		},
		watch: {
			showLoading: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.handleStartLoading()
					} else {
						this.handleStopLoading()
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			handleStartLoading() {
				this.nowNum = 30
				this.intervalId = setInterval(() => {
					if (this.nowNum < 99) {
						this.nowNum += 3
					} else {
						this.nowNum = 99
					}

				}, 30)
			},
			handleStopLoading() {
				if (this.intervalId) {
					clearInterval(this.intervalId)
					this.intervalId = null
					this.nowNum = 30
				}

			},
			hideLoading() {
				if (this.showLoading == true) {
					this.handleStopLoading()
					this.showLoading = false
					this.nowNum = 30
				}

			},
			// 绘制全屏图片
			handleDrawBg() {

				let loadingIcon = uni.getStorageSync('loadingIcon')
				let loadingText = uni.getStorageSync('loadingText')
				this.loadingIcon = loadingIcon ? loadingIcon :
					"https://cdn.osisx.com/1782600082969530369/image/1eda7ef656bb476cb6f00df90e7a0ca1.png"
				this.loadingText = loadingText ? loadingText : "玩命加载中..."


			},
			show() {
				this.showLoading = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.loadingPage {
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: #000;
		z-index: 999999999999999;
		pointer-events: none;


		.content {
			position: relative;
			width: 100%;
			height: 100%;
			background-color: #000;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center center;

			canvas {}

			.m-progress {
				position: absolute;
				left: 0rpx;
				bottom: 80rpx;
				width: 100%;
				min-height: 50rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				z-index: 99999;
				padding: 0rpx 60rpx;
				// background-color: pink;

				.center-progress {
					position: relative;
					width: 100%;
					height: 18rpx;
					border-radius: 12rpx;
					background-color: rgba(255, 255, 255, .3);
					overflow: hidden;

					.center-progress-content {
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						height: 100%;
						background-color: #fff;
						transition: width 0.05s;
						border-radius: 12rpx;
						z-index: 1;
					}

					.percent-text {
						position: absolute;
						left: 0rpx;
						font-size: 14rpx;
						color: #000;
						width: 100%;
						height: 100%;
						line-height: 18rpx;
						text-align: right;
						box-sizing: border-box;
						padding: 0rpx 50rpx;
						z-index: 2;
						text-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .6);

					}
				}

				.tip-text {
					position: relative;
					width: 100%;
					font-size: 20rpx;
					line-height: 20rpx;
					color: #fff;
					text-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, .6);
					text-align: center;
					margin-top: 10rpx;

					.tip-percent-text {
						position: absolute;
						right: 10rpx;
						top: 0rpx;
					}
				}



			}

			.bg-box {
				position: absolute;
				left: 0rpx;
				top: 0rpx;
				width: 100%;
				height: 100%;
				z-index: 9999;

				.bg-box-img {
					width: 100%;
					height: 100%;
				}

			}

			.loadingIconBox {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 792rpx;

				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				z-index: 99999;

				.loadingIcon {
					width: 72rpx;
					height: 72rpx;
					animation: rotate 1.5s linear infinite;
				}

				@keyframes rotate {
					0% {
						transform: rotate(0deg);
					}

					100% {
						transform: rotate(360deg);
					}
				}

				.tip-text {
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 300;
					font-size: 28rpx;
					color: #cdcdcd;
					margin-top: 56rpx;
					font-weight: 700;

				}


			}

		}
	}
</style>